<template>
	<div>
		<Header></Header>
		<div class="cx-shouye-img">
			<Swiper></Swiper>
		</div>
		<div class="cx-tong-food1">
			<ul>
				<li>
					<a href=""><img src="../assets/cximg/j1.jpg" alt="" /></a>
					<h3>洗涤服务</h3>
					<h5>优质</h5>
					<div>
						<i></i>
						<span>积分:</span>
						<span>1</span>
						<span>价值</span>
						<span>￥20</span>
						<a class="cx-jifen" href="">立即兑换</a>
					</div>
				</li>
				<li>
					<a href="#/spxq"><img src="../assets/cximg/f2.1.jpg" alt="" /></a>
					<h3>洗涤服务</h3>
					<h5>优质</h5>
					<div>
						<i></i>
						<span>积分:</span>
						<span>1</span>
						<span>价值</span>
						<span>￥20</span>
						<a class="cx-jifen" href="">立即兑换</a>
					</div>
				</li>
				<li>
					<a href=""><img src="../assets/cximg/j3.jpg" alt="" /></a>
					<h3>洗涤服务</h3>
					<h5>优质</h5>
					<div>
						<i></i>
						<span>积分:</span>
						<span>1</span>
						<span>价值</span>
						<span>￥20</span>
						<a class="cx-jifen" href="">立即兑换</a>
					</div>
				</li>
				<li>
					<a href=""><img src="../assets/cximg/1.2.jpg" alt="" /></a>
					<h3>洗涤服务</h3>
					<h5>优质</h5>
					<div>
						<i></i>
						<span>积分:</span>
						<span>1</span>
						<span>价值</span>
						<span>￥20</span>
						<a class="cx-jifen" href="">立即兑换</a>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	import Swiper from './swiper'
	import Spxq from './spxq'
	export default {
	  name: 'jfsc',
	  data () {
	    return {
	      msg: 'Welcome to Your Vue.js App'
	    }
	  },
	  components:{
	  	Swiper,Spxq
	  }
	}
</script>

<style scoped>
	.cx-tong-food1{
		width: 1280px;
		margin: 0 auto 20px;
	}
	.cx-tong-food1 ul{
		overflow: hidden;
	}
	.cx-tong-food1 li:nth-child(4n+1){
		margin-left: 0;
	}
	.cx-tong-food1 li{
		width: 303px;
		float: left;
		margin: 20px 0 0 20px;
		background-color: #F8F6F7;
		border: 1px solid #ececec;
	}
	.cx-tong-food1 ul li:hover{
		border: 1px solid forestgreen;
	}
	.cx-tong-food1 li img{
		width: 301px;
		height: 301px;
	}
	.cx-tong-food1 li h3{
		text-align: center;
		margin: 20px 0 10px 0;
		font-size: 24px;
	}
	.cx-tong-food1 li div{
		text-align: center;
	}
	.cx-tong-food1 li h5{
		text-align: center;
		color: #666;
		
	}
	.cx-jifen{
		width: 150px;
		height: 35px;
		margin: 10px auto;
		line-height: 35px;
		display: block;
		background-color: #F08200;
		color: #fff;
		border-radius: 20px;
	}
</style>